
<template>
    <van-action-sheet v-model="isShow" :actions="actions" @select="onSelect" cancel-text="取消"/>
</template>

<script lang="ts">
import { Vue, Component, Prop, Provide, Emit, Watch } from 'vue-property-decorator';
import { Subject } from 'rxjs';

@Component({
    components: {
    }
})
export default class AppActionSheet extends Vue {

    /**
     * 是否显示
     *
     * @type {boolean}
     * @memberof AppActionSheet
     */
    public  isShow:boolean = false;

    /**
     * 可观察对象
     *
     * @type {Subject}
     * @memberof AppActionSheet
     */
    public subject = new Subject();

    /**
     * 选项组
     *
     * @type {boolean}
     * @memberof AppActionSheet
     */
    @Prop() public actions?: Array<any>;

    /**
     * 选中某一个选项
     *
     * @memberof AppActionSheet
     */
    public onSelect(item:any){
        this.hide(item);
        this.$emit('select',item);
    }

    /**
     * 显示
     *
     * @memberof AppActionSheet
     */
    public show() {
        this.isShow = true;
        return this.subject;
    }

    /**
     * 隐藏
     *
     * @memberof AppActionSheet
     */
    public  hide(item:any) {
        this.isShow = false;
        this.subject.next(item);
        this.subject.asObservable();
        document.body.removeChild(this.$el);
        this.$destroy();
     }
       
}
</script>

<style lang="less">


</style>